<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/main.css" />
		<style>
			button{padding: 4px 8px; margin-top: 40px;}
			.formGroup{margin-bottom: 30px;}
		</style>
	</head>
	<body>
		radio伪标签：
		<div class="formGroup">
			<label >性别：</label>
			<input type="hidden" id="sex" value="2" />
			<div  data-ref="sex" data-value="1" data-txt="男"></div><!--组件的data-ref指向某个表单，说明这个组件用在哪个表单上-->
			<div  data-ref="sex" data-value="2" data-txt="女"></div>
		</div>
		
		cheackBox伪标签：
		<div class="formGroup">
			<label >爱好：</label>
			<input type="hidden" id="love" value="sleep,play"/>
			<div  data-ref="love" data-value="sleep" data-txt="睡"></div><!--组件的data-ref指向某个表单，说明这个组件用在哪个表单上-->
			<div  data-ref="love" data-value="eat" data-txt="吃"></div>
			<div  data-ref="love" data-value="play" data-txt="玩"></div>
		</div>


		select伪标签
		<div class="formGroup">
			<label >学历：</label>
			<input type="hidden" id="edu" value="zhuan"/>
			<ul data-ref="edu">
				<li data-value="zhuan">专科</li>
				<li data-value="ben">本科</li>
			</ul>
		</div>





		
		<button>提交</button>
		<script src="js/plugs/jquery-3.2.1.min.js"></script>
		<script src="js/plugs/utils.js"></script>
		<script>
			//检测是否ie，因为ie不支持es6即新版js的语法，所以我要判断。
			//但是我开发的时候用的是es6开发的，最后用bable在线转成的老版本js即es5
			//如果您改了main.es6.js，如果用在ie上，请把转换后的代码copy到min.es5.js中
			//在线转换地址https://babeljs.io/repl，当然您会用工具转更好
			function isIE() { 
		      if (!!window.ActiveXObject || "ActiveXObject" in window)
		        return true;
		      else
		        return false;
		    }
			if(isIE()){
				$.include(['js/main.es5.js']);
			}else{
				$.include(['js/main.es6.js']);
			}

			//开始使用
			//（之所以用$(function(){}是因为上边根据浏览器内核去加载不同js版本的main.js 执行太慢了）
			$(function(){
				//初始化自定义的radio，以及调用自定义raido的点击事件
				var sex=new FormComponent('radio',$('#sex'));
				sex.clickRadio()
				
				//初始化自定义的check，以及调用自定义check的点击事件
				var love=new FormComponent('check',$('#love'));
				love.clickCheck()

				//初始化自定义的select，以及调用自定义check的点击事件
				var edu=new FormComponent('select',$('#edu'));
				edu.clickSelect()
			})

			
			




			//测试取值
			$('button').click(function(){
				console.log("性别:"+$("#sex").val())
				console.log("爱好:"+$("#love").val().split(","))
				console.log("学历:"+$("#edu").val())
			})




			
		</script>
	</body>
</html>
